<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>The Animation Aemonstrates The Process</title>
  </head>
  <style>
    body {
      font-family: Consolas, "Courier New", monospace;
      font-size: 24px;
      min-width: 1080px;
      background-color: #333;
      color: #fff;
    }
    #IPTS {
      width: 100%;

      p {
        margin-block-start: 1.2rem;
        margin-block-end: 1.2rem;
        text-align: center;
        font-size: 2rem;
        line-height: 2rem;
        font-weight: bolder;

        input {
          width: 36rem;
          font-size: 2rem;
          line-height: 2rem;
          text-align: center;
          border-radius: 0.4rem;
          letter-spacing: 0.4rem;
        }
      }
    }
    #BYT_STR,
    #TER_STR {
      margin: 0 auto;
      min-height: 4em;
      width: 1080px;
      word-break: break-word;
      word-wrap: break-word;
    }
  </style>
  <body>
    <div id="BYT_STR"></div>
    <div id="IPTS">
      <p>
        <input id="iByt" type="number" readonly title="Byte Integer" />
      </p>
      <p>
        <input id="iDec" type="number" placeholder="Enter Decimal Integer" />
      </p>
      <p>
        <input id="iTer" type="number" readonly title="Ternary Integer" />
      </p>
    </div>
    <div id="TER_STR"></div>
  </body>

  <script type="module" src="./tpo2n.mjs"></script>
  <!-- <script type="module" src="./tpo2p.mjs"></script> -->
  <script type="module">
    import { nx } from "./tpo2n.mjs";
    // const nxStr = (pc,nc) => nx(+pc,+nc);

    const iDec = document.getElementById("iDec");
    const iByt = document.getElementById("iByt");
    const iTer = document.getElementById("iTer");
    const BYT_STR = document.getElementById("BYT_STR");
    const TER_STR = document.getElementById("TER_STR");

    // 十进制输入监听，转换为三进制，并触发后续操作
    iDec.addEventListener("change", () => {
      let dec = parseInt(iDec.value);
      if (dec < 0 || isNaN(dec)) {
        return alert("Invalid Input");
      } else if (dec > 10000) {
        return alert("Input too large");
      }
      iByt.value = dec.toString(2).replace(/1/, "3");
      iTer.value = dec.toString(3);

      Promise.all([runByt(), runTer()]).catch((err) => {
        console.error(err);
      });
    });

    const runByt = () =>
      new Promise((resolve, reject) => {
        BYT_STR.textContent = iByt.value;

        var nums = Array.from(iByt.value).map((e) => +e);
        for (let i = 0,n = 0; i < nums.length; i++) {
          nums[i] = n*3 + nums[i];
          n = nums[i+1];
        }
        
        BYT_STR.textContent = iByt.value;
        
        const OC = iByt.value.length;

        console.log("Change nums in runByt:", nums);

        // var next, prev, brow;

        // for (let c = 0; c < OC; c++) {
        //   next = intBStr.at(-1);
        //   brow = next === 3 ? 2 : 0;

        //   intBStr = intBStr.slice(0, -1);

        //   for (let i = intBStr.length - 1; i > 0; i--) {
        //     next = intBStr[i];
        //     prev = intBStr[i - 1];
        //   }
        // }

        resolve();
      });


    const runTer = () =>
      new Promise((resolve, reject) => {
        TER_STR.textContent = iTer.value;

        var nums = Array.from(iTer.value).map((e) => +e);
        const OC = nums.length;
        var next, prev;

        for (let c = 0; c < OC; c++) {
          prev = 0;
          for (let i = 0; i <= c; i++) {
            next = nums[i];
            nums[i] = nx(prev, next);
            prev = next;
          }

          TER_STR.textContent += ` -> ${nums
            .join("")
            .replace(/^0+/, "")}`;
        }

        resolve();
      });
  </script>
</html>
